<!doctype html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Lightbox</title>
</head>
	<script src="../../codebase/dhtmlxscheduler.js?v=5.3.10" type="text/javascript" charset="utf-8"></script>
	<script src="../../codebase/ext/dhtmlxscheduler_multiselect.js?v=5.3.10"></script>	
	<script src="../../codebase/ext/dhtmlxscheduler_editors.js?v=5.3.10"></script>
	<script src="../../codebase/ext/dhtmlxscheduler_recurring.js?v=5.3.10" type="text/javascript" charset="utf-8"></script>
	<!-- <script src="//cdn.dhtmlx.com/edge/dhtmlx.js?v=5.3.10" type="text/javascript"></script>
	<link rel="stylesheet" href="//cdn.dhtmlx.com/edge/dhtmlx.css?v=5.3.10" type="text/css"> -->
	<link rel="stylesheet" href="../../codebase/dhtmlxscheduler_material.css?v=5.3.10" type="text/css" charset="utf-8">
	
<style type="text/css" >
	html, body{
		margin:0px;
		padding:0px;
		height:100%;
		overflow:hidden;
	}	

	.dhx_multi_select_userselect input {
		vertical-align: middle;
	}
	.dhx_multi_select_fruitselect input {
		vertical-align: middle;
	}
</style>

<script type="text/javascript" charset="utf-8">
	function init() {
		scheduler.config.rtl = true;

		var alert_opts = [
			{ key: 1, label: 'None' },
			{ key: 2, label: 'On start date' },
			{ key: 3, label: '1 day before' }
		];

		var users = [
			{ key: 1, label: 'George' },
			{ key: 2, label: 'Nataly' },
			{ key: 3, label: 'Diana' },
			{ key: 4, label: 'Adam' }
		];

		var fruits = [
			{ key: 1, label: 'Orange' },
			{ key: 2, label: 'Banana' },
			{ key: 3, label: 'Peach' },
			{ key: 4, label: 'Kiwi' },
			{ key: 5, label: 'Plum' },
			{ key: 6, label: 'Grapefruit' },
			{ key: 7, label: 'Lime' },
			{ key: 8, label: 'Lemon' },
			{ key: 9, label: 'Mandarin' },
			{ key: 10, label: 'Pineapple' }
		];

		var priorities = [
			{ key: 1, label: 'High' },
			{ key: 2, label: 'Medium' },
			{ key: 3, label: 'Low' }
		];

		// var holders = [
		// 	{ key: 1, label: 'James' },
		// 	{ key: 2, label: 'Alex' },
		// 	{ key: 3, label: 'Antony' },
		// 	{ key: 4, label: 'Andrew' }
		// ];

		scheduler.attachEvent("onBeforeLightbox", function(id) {
			var ev = scheduler.getEvent(id);
			ev.my_template = "<b>Text: </b>"+ ev.text + " (" + ev.text.length + " symbols)";
			return true;
		});

		scheduler.locale.labels.section_text = 'Text';
		scheduler.locale.labels.section_time = 'Time';
		scheduler.locale.labels.section_select = 'Alert';
		scheduler.locale.labels.section_template = 'Details';
		scheduler.locale.labels.section_userselect = "Participants";
		scheduler.locale.labels.section_fruitselect = "Fruits";
		scheduler.locale.labels.section_checkme = "Check me";
		scheduler.locale.labels.section_priority = 'Priority';
		// scheduler.locale.labels.section_holders = "Holder";

		scheduler.config.lightbox.sections=[
			{ name:"text", height:35, map_to:"text", type:"textarea" , focus:true },
			{ name:"userselect", height: 35, map_to:"user_id", type:"multiselect", options: users, vertical:false },
			{ name:"fruitselect", height:50, map_to:"fruit_id", type:"multiselect", options: fruits, vertical:true },
			{ name:"recurring", height:115, type:"recurring", map_to:"rec_type", button:"recurring"},
			{ name:"time", height:40, type:"time", map_to:"auto" },
			{ name:"select", height:35, map_to:"type", type:"select", options:alert_opts},
			{ name:"template", height: 20, type:"template", map_to:"my_template"},
			{ name:"checkme", height:20, map_to:"single_checkbox", type:"checkbox", checked_value: "flag"},
			{ name:"priority", height:35, options:priorities, map_to:"priority", type:"radio"}
			// { name:"holders", options:holders, map_to:"holders", type:"combo", height:30, filtering:true},		
		];

		scheduler.init('scheduler_here',new Date(2018,0,1),"week");
		scheduler.load("/scheduler/backend/recurring_events");

		var eventId = scheduler.addEvent({
			start_date: "01-01-2018 09:00",
			end_date:   "01-01-2018 11:00",
			text:   "Meeting",
			type: 1,
			priority: 1,
			type: 1
		});
		scheduler.showLightbox(eventId);
		
	}
</script>

<body onload="init();">
	<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%'>
		<div class="dhx_cal_navline">
			<div class="dhx_cal_prev_button">&nbsp;</div>
			<div class="dhx_cal_next_button">&nbsp;</div>
			<div class="dhx_cal_today_button"></div>
			<div class="dhx_cal_date"></div>
			<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
			<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
			<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
		</div>
		<div class="dhx_cal_header">
		</div>
		<div class="dhx_cal_data">
		</div>
	</div>
</body>